<template>
    <div class="login-container">
        <el-card class="login-card">
            <div slot="header">
                <span style="font-size: 20px; font-weight: bold">系统登录</span>
            </div>

            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                        @keyup.enter.native="handleLogin"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 100%" :loading="loading" @click="handleLogin">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="login-tips">
                <p>提示：可以使用任意用户名和密码登录</p>
                <el-button type="text" @click="$router.push('/')">
                    返回首页
                </el-button>
            </div>
        </el-card>
    </div>
</template>
  
<script>
import { mapActions } from 'vuex'

export default {
    name: 'Login',
    data() {
        return {
            loading: false,
            loginForm: {
                username: '',
                password: ''
            },
            loginRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        ...mapActions(['login']),
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true

                    setTimeout(() => {
                        const token = 'mock-jwt-token-' + Date.now()
                        const userInfo = {
                            username: this.loginForm.username,
                            userId: Math.random().toString(36).substr(2),
                            loginTime: new Date().toLocaleString(),
                            role: this.loginForm.username === 'admin' ? 'admin' : 'user' // 添加角色
                        }

                        this.login({
                            token,
                            userInfo
                        })

                        this.loading = false
                        this.$message.success('登录成功！')

                        const redirect = this.$route.query.redirect || '/dashboard'
                        this.$router.push(redirect)
                    }, 1000)
                }
            })
        }
    }
}
</script>
  
<style scoped>
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
    width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login-tips {
    text-align: center;
    color: #909399;
    font-size: 12px;
}
</style>